<style scoped>
    .printEMS{ margin:0px; padding:0px; font-family:"黑体", Arial; font-size:8px; }
    img {border:0px;}
    .right{float: right;}
    .left{float: left;}
    .clearfix{clear: both;overflow: hidden;}
    .wrap{width: 502px;border:1px dashed #000000;margin: auto;}
    .cont{width: 502px;}
    .cont1{border-bottom: 1px dashed #000000;}
    .cont1 .left{width: 220px;border-right: 1px dashed #000000;}
    .cont1 .left .logo{height: 45px;}
    .cont1 .left .bottom{height: 64px;padding-left:25px;}
    .cont1 .right1{float: left;width:256px !important;height: 92px;padding:18px 3px 0px 0px !important;}
    .cont1 .right1 #barcodeTarget{transform: scaleX(1.5);margin-left: 50px;}
    .cont2{border-bottom: 1px dashed #000000;border-top: 1px dashed #000000;}
    .cont2 .left{border-right: 2px dashed #000000;padding-left: 8px;width:241px;height: 82px;padding-top:3px;font-size:8px;}
    .cont2 .right{padding-left: 4px;width: 240px;height: 82px;font-size:54px;text-align:center;line-height:82px;}
    .cont3{height:96px;padding-top:3px;border-bottom: 1px dashed #000000;border-top: 1px dashed #000000;}
    .cont4{border-bottom: 1px dashed #000000;border-top: 1px dashed #000000;}
    .cont4 .left{padding-left: 8px;width:160px;}
    .cont4 .left p{line-height: 23px;}
    .cont4 .right{border-left: 2px dashed #000000;padding:0px 16px 0px 8px;width: 300px;height:105px;}
    .cont4 .right p{line-height: 22px;}
    .cont5{padding-left: 8px;width:494px;height: 110px;border-top: 1px dashed #000000;border-bottom: 1px dashed #000000;}
    .cont5 #emsOrder div:last-child{height:12px !important;}
    .cont6{height: 22px;border-bottom: 1px dashed #000000;border-top: 1px dashed #000000;}
    .cont7{border-top: 1px dashed #000000;padding:12px 0 0 !important;height: 75px;border-bottom: 1px dashed #000000;}
    .cont7 #emsbarcode{transform: scaleX(1.5);}
    .cont8{line-height: 22px;border-bottom: 1px dashed #000000;border-top: 1px dashed #000000;}
    .cont8 .left{padding-left: 8px;width: 231px;height: 98px;}
    .cont8 .right{padding-left: 4px;width:257px ;height: 98px;border-left: 1px dashed #000000;}
    .cont9{border-top: 1px dashed #000000;}
    .cont9 .left{padding-left: 8px;width:317px;border-right: 2px dashed #000000;}
    .cont9 .left .top{height:90px ;padding-top:3px;}
    .cont9 .left .bottom{height: 37px;border-top: 1px dashed #000000;text-align: center;line-height: 37px;font-size: 8px;}
    .cont9 .right{width: 170px;height: 131px;text-align: center;}
    .cont9 .right img{width: 153px;height: 128px;}
</style>

<template>
    <div class="printEMS">
        <div align="center" class="noprint">
        <Button @click="print">打印</Button>
        </div>
        <div class="wrap" id="ems">
            <div class="cont cont1 clearfix">
                <div class="left">
                    <div class="logo"></div>
                    <div class="bottom">
                        <p style="font-size: 44px;margin-top: 19px;">标准快递</p>
                    </div>
                </div>
                <div class="right1">
                    <div id="barcodeTarget"></div>
                </div>
            </div>
            <div class="cont cont2 clearfix">
                <div class="left">
                    <div class="clearfix">
                        <p style="float: left;width: 36px;">寄件：</p>
                        <div style="float: left;width: 145px;">
                            <span>{{logistics.storage.contact}}</span>
                            <span>{{logistics.storage.tel}}</span>
                            <p>{{logistics.storage.province}}{{logistics.storage.city}}{{logistics.storage.address}}</p>
                        </div>
                    </div>
                </div>
                <div class="right">{{logistics.city}}</div>
            </div>
            <div class="cont cont3 clearfix">
                <p style="float: left;width: 44px;padding-left: 8px;">收件：</p>
                <div style="float: left;width: 430px;">
                    <span>{{logistics.contact}}</span>
                    <span>{{logistics.tel}}</span>
                    <p style="font-size:14px;font-weight: bold;">{{logistics.province}}{{logistics.city}}{{logistics.address}}</p>
                </div>
            </div>
            <div class="cont cont4 clearfix">
                <div class="left">
                    <p>付款方式：
					<span>寄货方付</span>

                    </p>
                    <p>计费重量(KG)：<span>{{logistics.totalWeight}}</span></p>
                    <p>保价金额(元)：<span>{{logistics.price}}</span></p>
                </div>
                <div class="right">
                    <p>收件人/代收人：</p>
                    <p>签收时间：<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时</span></p>
                    <span style="font-size: 6px;">快递送达收货人地址，经收件人或收件人允许的代收人签字，视为送达。</span>
                </div>
            </div>
            <div class="cont cont5">
                <div  class="clearfix">
                    <div style="float:left;width: 270px;">
                        <div class="clearfix">
                            <p class="left" style="width:50px;line-height: 32px;">订单号：</p>
                            <p class="left" style="width:210px;padding-top:3px;"><span id="emsOrder"></span></p>
                        </div>
                    </div>
                    <p style="float:left;width: 75px;line-height: 32px;">件数：<span>{{logistics.count}}</span></p>
                    <p style="float:left;width: 120px;line-height: 32px;">重量(KG)：<span>{{logistics.weight}}</span></p>
                </div>
                <div class="clearfix" style="line-height: 32px;">
                    <span style="float: left;width: 60px;">配货信息：</span>
                    <div style="float: left;width: 405px;">
                    </div>
                </div>
            </div>
            <div class="cont cont6"></div>
            <div class="cont cont7 clearfix">
                <div style="float: right;width: 230px;">
                    <div id="emsbarcode"></div>
                </div>
            </div>
            <div class="cont cont8 clearfix">
                <div class="left">
                    <div class="clearfix">
                        <p style="float: left;width: 36px;">寄件：</p>
                        <div style="float: left;width: 190px;">
                            <span>{{logistics.storage.contact}}</span>
                            <span>{{logistics.storage.tel}}</span>
                            <p>{{logistics.storage.province}}{{logistics.storage.city}}{{logistics.storage.address}}</p>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="clearfix">
                        <p style="float: left;width: 36px;">收件：</p>
                        <div style="float: left;width: 190px;">
                            <span>{{logistics.contact}}</span>
                            <span>{{logistics.tel}}</span>
                            <p>{{logistics.province}}{{logistics.city}}{{logistics.address}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cont cont9 clearfix">
                <div class="left">
                    <div class="top">
                        <div class="clearfix">
                            <p style="float: left;width: 36px;">备注：</p>
                            <div style="float: left;width: 280px;">{{logistics.remark}}</div>
                        </div>
                    </div>
                    <div class="bottom">
                        <span>网址：www.ems.com.cn</span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>客服电话：11183</span>
                    </div>
                </div>
                <div class="right">
                    <img src="../../images/print/ems.jpg" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                logistics:{},
                waybillno:"",
                cardNo:"",
                date:'',
                barcode:"",
                code:''
            }
        },
        created: function () {
            $(".console-body").css({top:0});
            this.date = new Date().format("yyyy-MM-dd");
            axios.get('shipping/'+this.$route.params.shippingId+'/print').then(res => {

                if(res.data.receipt !="" ){
                    this.waybillno =  "签单返还："+res.data.waybillno;
                }
                this.barcode = res.data.waybillno;
                this.code = res.data.code
                if(res.data.cardno != null&&"1".equals(res.data.paytype)){
                     this.cardNo = res.data.cardno;
                }else if(res.data.payerAccountNumber != null&&res.data.payerAccountNumber !=""&&!"1".equals(res.data.paytype)){
                     this.cardNo = res.data.payerAccountNumber;
                }
                this.logistics = res.data;
             }).catch(err =>{
             })
        },

        mounted() {
            window.onresize = function(){
                $("#contcentHeight").css({height:(window.innerHeight - 174)+"px"});
                $("#rightWidth").css({width:(window.innerWidth - 180)+"px"});
            };
        },

        updated:function () {
            $("#barcodeTarget").barcode(this.barcode, "code128", {
                barWidth :1,
                barHeight : 78,
                fontSize :8,
            });

            $("#emsbarcode").barcode(this.barcode, "code128", {
                barWidth :1,
                barHeight : 46,
                fontSize :8,
            });
            $("#emsOrder").barcode(this.code, "code128", {
                barWidth :1,
                barHeight : 44,
                fontSize :8,
            });
        },
        methods: {
            print(){
                $(".noprint").hide();
                window.print();
                $(".noprint").show();
            },
        }

    }
</script>
